<template>
  <div class="mod-prod">
    <!--    <div class="customForm" style="margin-bottom: 10px">-->
    <!--      <el-button type="primary" class="btn" @click.stop="importExcel()">导入</el-button>-->
    <!--    </div>-->
    <el-form :inline="true" :model="dataForm">
      <el-form-item label="用户信息">
        <el-input @change="searchChange" placeholder="姓名/手机号/身份证" v-model="dataForm.code" size="small"></el-input>
      </el-form-item>
      <el-form-item label="工厂信息">
        <el-input @change="searchChange" placeholder="工厂名称" v-model="dataForm.factoryName" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click.stop="searchChange">搜索</el-button>
      </el-form-item>
    </el-form>
    <avue-crud ref="crud" :page="page" :data="dataList" :table-loading="dataListLoading" :option="tableOption"
      @search-change="searchChange" @selection-change="selectionChange" @on-load="getDataList">
      <template slot="menuLeft">
        <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="importExcel()">导入</el-button>
      </template>

      <template slot="workerInfo" slot-scope="scope">
        <div>
          <div class="content">姓名: {{ scope.row.name }}</div>
          <div class="content">手机: {{ scope.row.mobile }}</div>
          <div class="content">性别: {{ scope.row.sex == 1 ? '女' : '男' }}</div>
          <div class="content">身份证: {{ scope.row.idCard }}</div>
        </div>
      </template>

      <template slot="jobInfo" slot-scope="scope">
        <div>
          <div class="content">入职单位: {{ scope.row.factoryName }}</div>
          <div class="content">入职时间: {{ scope.row.joinTime }}</div>
          <div class="content">离职时间: {{ scope.row.leaveTime }}</div>
          <div class="content">状态: {{ scope.row.status == 1 ? '在职' : '离职' }}</div>
          <!--          <div class="content">基础工资: {{scope.row.salary}}</div>-->
          <div class="content">职位: {{ scope.row.job }}</div>
          <div class="content">结算方式: {{ scope.row.settleMethod == 0 ? '日结' : '月结' }}</div>
        </div>
      </template>

      <template slot="dealerInfo" slot-scope="scope">
        <div>
          <div class="content">姓名: {{ scope.row.dealerName }}</div>
          <div class="content">手机号: {{ scope.row.dealerMobile }}</div>
        </div>
      </template>

      <template slot-scope="scope" slot="menu">
        <el-button type="text" @click="deleteHandle(scope.row.id)">删除</el-button>
      </template>
    </avue-crud>
    <import-worker ref="importWorker" @refreshDataList="refreshList"></import-worker>
  </div>
</template>

<script>
import { tableOption } from '@/crud/worker/index'
import importWorker from './import-worker'
export default {
  name: 'index',
  components: { importWorker },
  data() {
    return {
      dataForm: {
        code: '',
        factoryName: ''
      },
      dataList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      dataListLoading: false,
      tableOption: tableOption
    }
  },
  methods: {
    // 获取数据列表
    getDataList(page, params) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/v1/worker/list'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize,
              code: this.dataForm.code,
              factoryName: this.dataForm.factoryName
            }
          )
        )
      }).then(({ data }) => {
        console.log(data)
        this.dataList = data.data.records
        this.page.total = data.data.total
        this.dataListLoading = false
      })
    },
    // 新增 / 修改
    audit(id) {
      this.$router.push({
        path: '/jobInfo',
        query: { id: id }
      })
    },
    // 删除
    deleteHandle(id) {
      this.$confirm(`确定进行删除操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let param = {
            id: id,
          }
          this.$http({
            url: this.$http.adornUrl(`/v1/worker/delete`),
            method: 'post',
            data: this.$http.adornData(param)
          }).then(({ data }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList(this.page)
              }
            })
          })
        })
        .catch(() => {
        })
    },
    importExcel() {
      this.$refs['importWorker'].init()
      // this.$refs['upload'].$children[0].$refs.input.click()
    },
    // 条件查询
    searchChange() {
      this.getDataList(this.page, this.dataForm)
    },
    // 多选变化
    selectionChange(val) {
      this.dataListSelections = val
    },
    refreshList() {
      this.getDataList(this.page, this.dataForm)
    }
  }
}
</script>
